<template>
  <d2-container>
    <el-form :model="FormSearch" status-icon label-width="100px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="条件查找" prop="cname">
            <el-input type="text" v-model="FormSearch.cname" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchClick()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据表格 -->
    <d2-crud
      ref="d2Crud"
      add-title="添加页面配置"
      edit-title="编辑"
      :columns="columns"
      :data="data"
      :pagination="page"
      :rowHandle="rowHandle"
      :add-template="addTemplate"
      :add-rules="addRules"
      :edit-template="editTemplate"
      :form-options="formOptions"
      @row-add="handleRowAdd"
      @row-edit="handleRowEdit"
      @custom-emit-1="copyLink"
      @dialog-cancel="handleDialogCancel"
      @pagination-current-change="paginationCurrentChange"
    >
      <el-button slot="header" style="margin-bottom: 5px;" @click="addRow">添加页面配置</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>
import {
  getAccountConfig,
  setAccountConfig,
  getXntAccountList
} from "@/api/accountAdmin/index";
// 查看图片组件
import good_img from "@/components/xtnComponents/Good_img";
// 查看和上传图片组件
import upload_img from "@/components/xtnComponents/UploadImg";

export default {
  data() {
    return {
      // 搜索数据
      FormSearch: {
        cname: ""
      },
      // 字段名称
      columns: [
        {
          title: "roleid",
          key: "roleid",
          align: "center"
        },
        {
          title: "配置名",
          key: "cname",
          align: "center"
        },
        {
          title: "配置图片",
          key: "cvalue",
          align: "center",
          component: {
            name: good_img
          }
        }
      ],
      // 列表数据
      data: [],
      // 操作列数据
      rowHandle: {
        align: "center",
        width: 200,
        edit: {
          icon: "el-icon-edit",
          text: "编辑",
          size: "small"
        },
        custom: [
          {
            text: "复制链接",
            type: "primary",
            size: "mini",
            emit: "custom-emit-1"
          }
        ]
      },
      // 添加数据
      addTemplate: {
        roleid: {
          title: "选择账号",
          value: "",
          component: {
            name: "el-select",
            options: []
          }
        },
        cname: {
          title: "配置名",
          value: ""
        },
        cvalue: {
          title: "配置图片",
          value: "",
          component: {
            name: upload_img,
            props: {
              myProps: process.env.VUE_APP_API + "/xntAdmin/updateImg"
            }
          }
        }
      },
      // 编辑数据
      editTemplate: {
        cname: {
          title: "配置名",
          value: "",
        },
        cvalue: {
          title: "配置图片(点击上传)",
          value: "",
          component: {
            name: upload_img,
            props: {
              myProps: process.env.VUE_APP_API + "/xntAdmin/updateImg"
            }
          }
        }
      },
      formOptions: {
        labelWidth: "80px",
        labelPosition: "left",
        saveLoading: false
      },
      addRules: {
        roleid: [ { required: true, message: '请选择账号', trigger: 'blur' } ],
        cname: [ { required: true, message: '请输入配置名', trigger: 'blur' } ],
      },
      // 分页数据
      page: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
    };
  },
  created() {
    let params = {
      page: this.page.pageIndex,
      limit: this.page.pageSize
    };
    this.init(params);
    this.getAccountList(params);
  },
  methods: {
    // 初始化身体数据列表
    init(params) {
      // params.cname = '图片';
      getAccountConfig(params)
        .then(res => {
          if (res.success) {
            this.data = res.rows;
            this.page.total = res.total;
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 获取厂商账号 设置首页参数的时候用的 id
    getAccountList(params) {
      params.type = 0;
      getXntAccountList(params)
        .then(res => {
          if (res.success) {
            res.rows.forEach(item => {
              let opt = {
                label: item.account,
                value: item.id  
              };
              this.addTemplate.roleid.component.options.push(opt);
            });
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 分页数改变，调用
    paginationCurrentChange(pageIndex) {
      let params = {
        limit: this.page.pageSize,
        cname: this.FormSearch.cname
      };
      params.page = this.page.pageIndex = pageIndex;
      this.init(params);
    },

    // 复制链接
    copyLink({ index, row }) {
      // 获取 URL 的协议部分 http:
      let protocol = window.location.protocol;
      // 获取与 URL 关联的端口号
      let port = window.location.port;
      //获取当前窗口的主机名
      let host = window.location.host;
      let netAdd = `${protocol}//${host}/pc/login?id=${row.id}`;

      this.$confirm(netAdd, "点击确定复制链接, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let oInput = document.createElement("input");
        oInput.value = netAdd;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        oInput.style.display = "none";
        document.body.removeChild(oInput);
        this.$message({
          type: "success",
          message: "复制成功!"
        });
      });
    },

    // 编辑提交
    handleRowEdit({ index, row }, done) {
      // 保存按钮的loading状态
      this.formOptions.saveLoading = true;
      console.log(row)
      let params = row;
      params.cvalue = sessionStorage.imgUrl
      setAccountConfig(params)
        .then(res => {
          console.log(res);
          if (res.success) {
            this.$message({
              message: "编辑成功",
              type: "success"
            });
          }

          // done可以传入一个对象来修改提交的某个字段
          done();
          // 保存按钮的loading状态
          this.formOptions.saveLoading = false;
          // 重新加载列表
          let params = {
            page: this.page.pageIndex,
            limit: this.page.pageSize
          };
          params.cname = this.FormSearch.cname;
          this.init(params);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 普通的新增
    addRow() {
      this.$refs.d2Crud.showDialog({
        mode: "add"
      });
    },

    // 新增成功
    handleRowAdd(row, done) {
      this.formOptions.saveLoading = true;
      let params = row;
      params.cvalue = sessionStorage.imgUrl
      console.log(params)
      setAccountConfig(params)
        .then(res => {
          console.log(res);
          if (res.success) {
            this.$message({
              message: "添加成功",
              type: "success"
            });

            // done可以传入一个对象来修改提交的某个字段
            done();
            // 保存按钮的loading状态
            this.formOptions.saveLoading = false;
            // 重新加载列表
            let params = {
              page: this.page.pageIndex,
              limit: this.page.pageSize
            };
            params.cname = this.FormSearch.cname;
            this.init(params);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 取消编辑和添加
    handleDialogCancel(done) {
      done();
    },

    // 条件查询搜索
    searchClick() {
      let params = {
        page: 1,
      };
      params.cname = this.FormSearch.cname;
      this.init(params);
    },

    // 重置查询
    resetForm() {
      this.FormSearch.cname = "";
      let params = {
        page: 1,
        limit: 10
      };
      this.init(params);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
